<template>
    <div class="wrapper" @click="openBottomPopup">
        <div
             :class="['cell-area',hasBottomBorder && 'bottom-border',hasTopBorder && 'top-border']">
            <div class="cell-title-area">
                <text class="label-t">{{label}}</text>
                <text class="title-t">{{title}}</text>
            </div>
            <div class="cell-input-area">
                <text class="input-t">{{showValue}}</text>
                <wxc-icon name="more"></wxc-icon>
            </div>
        </div>

        <wxc-popup popup-color="white"
                   :show="isBottomShow"
                   @wxcPopupOverlayClicked="popupOverlayBottomClick"
                   pos="bottom"
                   :height="height">
            <div class="content">

                <wxc-checkbox-list :list="list"
                                   :config="{ checkedColor: '#01A65A',checkedIcon:'root:img/select/selected.png'}"
                                   @wxcCheckBoxListChecked="wxcCheckBoxListChecked"></wxc-checkbox-list>
                <div class="prop-head">
                    <div @click="confirmClick"  class="sub-btn">
                        <text class="sub-btn-t">确定</text>
                    </div>
                </div>
            </div>
        </wxc-popup>
    </div>
</template>

<style>
    .wrapper {
        background-color: white;
    }

    .sub-btn{
        width:750px;
        height:80px;
        background-color: #01A65A;
        justify-content: center;
        align-items: center;
        padding-left:10px;
        padding-right: 10px;
        padding-top:10px;
        padding-bottom:10px;
    }

    .sub-btn-t{
        font-size: 32px;
        color: white;
    }
    .prop-head{
        height:80px;
        width:750px;
        flex-direction: row;
        justify-content: flex-end;
        position: fixed;
        bottom:0;
    }

    .cell-title-area {
        width: 300px;
        height: 100%;
        padding-left: 15px;
        flex-direction: row;
        align-items: center;
    }

    .label-t {
        font-size: 32px;
        color: #ff5d54;
    }

    .title-t {
        font-size: 32px;
        color: #272727;
    }

    .input-t {
        font-size: 32px;
        color: #666;
    }

    .cell-input-area {
        width: 450px;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
    }

    .cell-area {
        width: 750px;
        flex-direction: row;
        height: 90px;
    }

    .top-border {
        border-top-width: 1px;
        border-top-color: #e2e2e2;
    }

    .bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }

</style>

<script>
    import {WxcPopup, WxcIcon,WxcCheckbox,WxcCheckboxList} from 'weex-ui';

    export default {
        components: {WxcPopup, WxcIcon,WxcCheckbox,WxcCheckboxList },
        props: {
            hasTopBorder: {
                type: Boolean,
                default: true
            },
            hasBottomBorder: {
                type: Boolean,
                default: true
            },
            showJoinTag:{
                type: String,
                default: ','
            },
            list:{
                type: Object,
                default: []
            },
            label:{
                type: String,
                default: ''
            },
            title:{
                type: String,
                default: ''
            }
        },
        data: () => ({
            isBottomShow: false,
            height: 800,
            showValue:'',//多选显示值
            checkedData:[]

        }),
        methods: {
            openBottomPopup() {
                this.isBottomShow = true;
            },
            //非状态组件，需要在这里关闭
            popupOverlayBottomClick() {
                this.isBottomShow = false;
            },
            wxcCheckBoxListChecked(e){
                this.checkedData = e.checkedList
//                var modal = weex.requireModule('modal')
//                modal.alert({message:this.checkedData})

                var checkdData = {}

                for(let i in this.checkedData){
                    var ele = this.checkedData[i]
                    checkdData[ele] = true
                }


                for(let i in this.list){
                    var ele = this.list[i]
                    if(checkdData[ele.value]){
                        ele.checked = true
                    }else{
                        ele.checked = false
                    }
                }

            },
            confirmClick(){
                this.$emit('getVal', this.checkedData)
                var show = ''

                var checkdData = {}

                for(let i in this.checkedData){
                    var ele = this.checkedData[i]
                    checkdData[ele] = true
                }

                for(let i in this.list){
                    var ele = this.list[i]
                    if(checkdData[ele.value]){
                        show += this.showJoinTag+this.list[i].title
//                        Vue.set(this.list,'checked',true)
                    }else{
//                        Vue.set(this.list,'checked',false)
                    }
                }


                if(show) {
                    if(show.length > 12){
                        this.showValue = show.substring(1,12)+'...'
                    }else{
                        this.showValue = show.substring(1)
                    }
                }else{
                    this.showValue = ''
                }

                this.isBottomShow = false
            }
        }
    };
</script>